<!DOCTYPE html>
<html>
  <head>
    <title>s05.html</title>

    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
   
	<script type="text/javascript" src="../js/jquery-1.11.1.js"></script>
	<script type="text/javascript">
		function f1(){
			$('table tr').css('background','#cccccc');
			$('table tr:first').css('background-color', 'red');
			$('tbody tr:eq(3)').css('background-clolr','pink');
		}
		
		function f2(){
			$('tbody tr:even').css('background','#fff8dc');
			$('tbody tr:odd').css('background','yellow');
		}
		
		function f3(){
			$('tbody tr:eq(1) td:eq(1)')
			.css('background-color','yellow')
			.css('font-size','30px');
		}
		
		function f4(){
			$('tbody tr:not(#tr2)').css('background-color','yellow');
		}
	</script>
  </head>
  
  <body style="font-size: 24px">
  	<!-- 基本过滤选择器 -->
  	<!-- :first  第一行被挑选出来
  		 :last	最后一个
  		 :not(selector) 把selector排除在外
  		 :even 偶数行
  		 :odd奇数行
  		 :eq(index) 如果要挑选第二行？
  		 			使用该方法，index是从0开始
  		 :gt(index) 大于index下标的
  		 :lt(index) 小于index下标的 
  	-->
   
   <a href="javascript:;" onclick="f4();">过滤选择器</a>
   <table width="60%" border="1" cellpadding="0" cellspacing="0">
   		<thead>
   			<tr><td>name</td><td>age</td></tr>
   		</thead>
   		<tbody>
   			<tr><td>Tom</td><td>21</td></tr>
   			<tr id="tr2"><td>Jerry</td><td>22</td></tr>
   			<tr><td>Kitty</td><td>23</td></tr>
   			<tr><td>Doro</td><td>24</td></tr>
   		</tbody>
   </table>
  </body>
</html>
